<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考试列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- layui css -->
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!-- layui -->
    <script src="../../layui/layui.js"></script>
    <!-- vue -->
    <script src="../../js/vue.js"></script>
    <!-- 组件配置信息 -->
    <script src="../../js/config.js"></script>
    <!-- 扩展插件配置信息 -->
    <script src="../../modules/config.js"></script>
    <!-- 工具方法 -->
    <script src="../../js/utils.js"></script>
    <style>
        .exam-list {
            padding: 15px;
        }

        .exam-card {
            background: #fff;
            border-radius: 2px;
            margin-bottom: 15px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
            transition: all .2s;
        }

        .exam-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
            transform: translateY(-2px);
        }

        .exam-header {
            position: relative;
            height: 140px;
            overflow: hidden;
        }

        .exam-header img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .status-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 3px 10px;
            border-radius: 2px;
            color: #fff;
            font-size: 12px;
        }

        .exam-body {
            padding: 12px;
        }

        .exam-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .exam-desc {
            color: #666;
            font-size: 13px;
            margin-bottom: 8px;
            height: 36px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .exam-info {
            color: #999;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .exam-info p {
            margin-bottom: 3px;
        }

        .exam-footer {
            border-top: 1px solid #f6f6f6;
            padding: 8px 12px;
            text-align: right;
        }

        @media screen and (max-width: 992px) {
            .layui-col-md3 {
                width: 50%;
            }
        }

        @media screen and (max-width: 768px) {
            .layui-col-md3 {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="layui-container">
        <div class="layui-row layui-col-space15 exam-list">
            <div class="layui-col-md3" v-for="exam in examList" :key="exam.id">
                <div class="exam-card">
                    <div class="exam-header">
                        <img :src="exam.coverImage?baseurl+exam.coverImage.split(',')[0]:''" :alt="exam.name">
                        <span class="status-tag" :class="getStatusClass(exam.status)">
                                {{getStatusText(exam.status)}}
                            </span>
                    </div>
                    <div class="exam-body">
                        <div class="exam-title">{{exam.name}}</div>
                        <div class="exam-desc">{{exam.description}}</div>
                        <div class="exam-info">
                            <!-- 未开始 -->
                            <template v-if="exam.status === 0">
                                <p>报名时间：{{exam.enrollStartTime}} 考试时长：{{exam.duration}}分钟</p>
                            </template>
                            <!-- 报名中 -->
                            <template v-if="exam.status === 1">
                                <p>报名截止：还剩{{exam.enrollRemainDays}}天</p>
                            </template>
                            <!-- 报名结束 -->
                            <template v-if="exam.status === 2">
                                <p>考试时间：{{exam.examTime}}</p>
                            </template>
                            <!-- 考试中 -->
                            <template v-if="exam.status === 3">
                                <p>剩余时间：{{exam.remainTime}}</p>
                            </template>
                            <!-- 已结束 -->
                            <template v-if="exam.status === 4">
                                <p>考试时间：{{exam.examTime}}</p>
                            </template>
                        </div>
                    </div>
                    <div class="exam-footer">
                        <button :class="getButtonClass(exam.status)"
                                @click="handleExam(exam)"
                                :disabled="exam.status === 0">
                            {{getButtonText(exam.status)}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 初始化 Vue 实例
    var vue = new Vue({
        el: '#app',
        data: {
            examList: []
        },
        baseurl:'',
        methods: {
            getStatusClass(status) {
                const classMap = {
                    0: 'layui-bg-gray',
                    1: 'layui-bg-green',
                    2: 'layui-bg-orange',
                    3: 'layui-bg-blue',
                    4: 'layui-bg-red'
                };
                return classMap[status];
            },
            getStatusText(status) {
                const textMap = {
                    0: '未开始',
                    1: '报名中',
                    2: '报名结束',
                    3: '考试中',
                    4: '已结束'
                };
                return textMap[status];
            },
            getButtonClass(status) {
                const classMap = {
                    0: 'layui-btn layui-btn-disabled',
                    1: 'layui-btn layui-btn-normal',
                    2: 'layui-btn layui-btn-warm',
                    3: 'layui-btn',
                    4: 'layui-btn layui-btn-danger'
                };
                return classMap[status];
            },
            getButtonText(status) {
                const textMap = {
                    0: '等待开放报名',
                    1: '立即报名',
                    2: '等待考试',
                    3: '继续考试',
                    4: '查看成绩'
                };
                return textMap[status];
            },
            handleExam(exam) {
                switch (exam.status) {
                    case 1:
                        layer.confirm('确定要报名参加该考试吗？', {
                            btn: ['确定', '取消']
                        }, function () {
                            let userid = localStorage.getItem("userid");
                            layui.http.request(`exampaper/${exam.id}/enroll?userid=${userid}`, 'post', {}, function(res) {
                               if (res.code === 0) {
                                   layer.msg('报名成功', {icon: 1});
                               } else{
                                   layer.msg(res.message);
                               }
                            });
                        });
                        break;
                    case 2:
                        layer.msg('请在考试开始时间准时参加考试');
                        break;
                    case 3:
                        layer.msg('正在进入考试...', {icon: 16});
                        let userid = localStorage.getItem("userid");
                        layui.http.request(`examrecord/deleteRecords?userid=${userid}&paperid=${exam.id}`, 'post', {}, function(res) {
                            if (res.code === 0) {
                                window.parent.location.href = `exam.html?id=${exam.id}`;
                            } else {
                                layer.msg(res.message);
                            }

                        });
                        break;
                    case 4:
                        break;
                }
            }
        }
    });
    // 初始化 Layui
    layui.use(['layer', 'http'], function () {
        var http = layui.http;
        vue.baseurl = http.baseurl;
        http.request(`exampaper/cards`, 'get', {}, function (res) {
            if (res.code === 0) {
                vue.examList = res.data;
            }
        });

    });
</script>
</body>
</html>